<template>
  <el-container>
    <el-aside width="200px" style="height: border-box" >
      <!-- 菜单栏 -->
      <el-menu
          background-color="#fafafa"
          text-color="#BFCBD9"
          unique-opened
          active-text-color="#3491FF"
          router
          :collapse-transition="false"
      >
        <el-submenu class="submenu" :index=1>
          <template #title>
            <i class="el-icon-s-custom"></i>
            <span style="color: #2f2f2f"> 个人问卷 </span>
          </template>
          <el-menu-item ><el-button type="text" @click="gotoCreate"><i class="el-icon-menu"></i>我创建的</el-button> </el-menu-item>
          <el-menu-item><el-button type="text" @click="gotoRecycle"><i class="el-icon-menu"></i>回收站</el-button> </el-menu-item>
        </el-submenu>
        <el-submenu class="submenu" :index=2>
          <template #title>
            <i class="el-icon-circle-plus-outline"></i>
            <span style="color: #2f2f2f"> 新建问卷 </span>
          </template>
          <el-menu-item><el-button type="text" @click="gotoCreate"><i class="el-icon-menu"></i>普通问卷</el-button> </el-menu-item>
          <el-menu-item><el-button type="text" @click="gotoRecycle"><i class="el-icon-menu"></i>投票问卷</el-button> </el-menu-item>
          <el-menu-item><el-button type="text" @click="createNew"><i class="el-icon-menu"></i>考试问卷</el-button> </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <div class="back"></div>
    </el-main>
  </el-container>
</template>
<script>
// import Setup from '@/views/Setup';
// import Statistics from '@/views/Statistics.vue'

// import axios from "axios";
// function getNewQid() {
//   this.username='test'
//   axios.post("questionnaire_list/", this.username).then((response) => {
//     console.log(response.data.questionnaire_id)
//   });
//   return 1;
// }

import axios from "axios";

export default {
    name: "Home",
    data() {
      return {
        backgroundDiv: {
          backgroundImage: 'url(' + require('@/assets/back1.jpg') + ')'
        },
        username:'',
        form:{
          username:'',
        },
        menulist: [
          {
            id: 0,
            name: "用户管理",
            path: "",
            children: [
            ],
          },
          {
            id:1,
            name:'新建问卷',
            path:"",
            children: [],
          }
        ],
        iconlist: {
          0: "el-icon-s-custom",
          1: "el-icon-s-release",
        },
      };
    },
    methods:{
      gotoCreate:function (){
        this.$router.push('/meCreate')
      },
      gotoRecycle:function (){
        this.$router.push('/recycle')
      },
      createNew:function (){
        this.form.username=localStorage.getItem('username'),
        axios.post("createquestionnaire/",this.form).then((response) => {
          this.$router.push('/questionnaire/'+response.data.questionnaire_id)
        });
      }
    },
};
  
</script>

<style scoped>
.el-header {
  background-color: rgba(238, 115, 115, 0.459);
  display: flex;
  padding-left: 0;
  align-items: center;
  height: 45px;
  align-content: center;
  justify-content: space-between;
}
.el-container {
  height: 100%;
  position: fixed;
  font-family: "微软雅黑";
}
.el-menu {
  height: 100%;
}
.el-main{
  width: 1400px;
  display: flex;
  background-color: #e8f0f3;
}
.back{
  /* background-image: url("../assets/star.png"); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1000px;
  margin-bottom: 100px;
  margin-left: 150px;
}
</style>
